<template>
  <div class="preference-settings">
    <div class="form-header">
      <h3>{{ t('dashboard.profile.preferences.title') }}</h3>
      <p>{{ t('dashboard.profile.preferences.subtitle') }}</p>
    </div>

    <!-- 界面偏好 -->
    <div class="preference-section">
      <h4>{{ t('dashboard.profile.preferences.interface') }}</h4>
      <div class="preference-grid">
        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.themeMode') }}</span>
            <p>{{ t('dashboard.profile.preferences.themeMode_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-radio-group v-model="preferences.theme" @change="handleThemeChange">
              <el-radio-button label="light">{{ t('dashboard.profile.preferences.modes.light') }}</el-radio-button>
              <el-radio-button label="dark">{{ t('dashboard.profile.preferences.modes.dark') }}</el-radio-button>
              <el-radio-button label="auto">{{ t('dashboard.profile.preferences.modes.auto') }}</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.themeColor') }}</span>
            <p>{{ t('dashboard.profile.preferences.themeColor_desc') }}</p>
          </div>
          <div class="preference-control">
            <div class="theme-colors">
              <div
                v-for="color in themeColors"
                :key="color.name"
                class="color-option"
                :class="{ active: preferences.themeColor === color.name }"
                :style="{ backgroundColor: color.value }"
                @click="handleThemeColorChange(color.name)"
              >
                <el-icon v-if="preferences.themeColor === color.name"><Check /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.language') }}</span>
            <p>{{ t('dashboard.profile.preferences.language_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-select v-model="preferences.language" :placeholder="t('dashboard.profile.preferences.language')" style="width: 150px;">
              <el-option :label="t('dashboard.profile.preferences.languages.zh_CN')" value="zh-CN" />
              <el-option :label="t('dashboard.profile.preferences.languages.en_US')" value="en-US" />
              <el-option :label="t('dashboard.profile.preferences.languages.zh_TW')" value="zh-TW" />
            </el-select>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能偏好 -->
    <div class="preference-section">
      <h4>{{ t('dashboard.profile.preferences.functional') }}</h4>
      <div class="preference-grid">
        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.defaultView') }}</span>
            <p>{{ t('dashboard.profile.preferences.defaultView_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-radio-group v-model="preferences.defaultView">
              <el-radio-button label="grid">{{ t('dashboard.profile.preferences.views.grid') }}</el-radio-button>
              <el-radio-button label="list">{{ t('dashboard.profile.preferences.views.list') }}</el-radio-button>
            </el-radio-group>
          </div>
        </div>



        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.autoSave') }}</span>
            <p>{{ t('dashboard.profile.preferences.autoSave_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-switch v-model="preferences.autoSave" />
          </div>
        </div>

        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.showHidden') }}</span>
            <p>{{ t('dashboard.profile.preferences.showHidden_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-switch v-model="preferences.showHiddenFiles" />
          </div>
        </div>
      </div>
    </div>

    <!-- 通知设置 -->
    <div class="preference-section">
      <h4>{{ t('dashboard.profile.preferences.notifications') }}</h4>
      <div class="preference-grid">
        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.email_title') }}</span>
            <p>{{ t('dashboard.profile.preferences.email_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-switch v-model="preferences.emailNotifications" />
          </div>
        </div>

        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.browser_title') }}</span>
            <p>{{ t('dashboard.profile.preferences.browser_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-switch v-model="preferences.browserNotifications" />
          </div>
        </div>

        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.share_title') }}</span>
            <p>{{ t('dashboard.profile.preferences.share_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-switch v-model="preferences.shareNotifications" />
          </div>
        </div>

        <div class="preference-item">
          <div class="preference-label">
            <span>{{ t('dashboard.profile.preferences.storage_title') }}</span>
            <p>{{ t('dashboard.profile.preferences.storage_desc') }}</p>
          </div>
          <div class="preference-control">
            <el-switch v-model="preferences.storageWarnings" />
          </div>
        </div>
      </div>
    </div>

    <!-- 保存按钮 -->
    <div class="preference-actions">
      <el-button @click="handleReset">{{ t('dashboard.profile.preferences.actions.reset') }}</el-button>
      <el-button type="primary" @click="handleSave" :loading="saving">
        {{ t('dashboard.profile.preferences.actions.save') }}
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check } from '@element-plus/icons-vue'
import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()
const { t } = useI18n()
const saving = ref(false)

// 偏好设置数据
const preferences = reactive({
  theme: 'light',
  themeColor: 'default',
  language: 'zh-CN',
  defaultView: 'grid',
  autoSave: true,
  showHiddenFiles: false,
  emailNotifications: true,
  browserNotifications: true,
  shareNotifications: true,
  storageWarnings: true
})

// 主题色选项
const themeColors = [
  { name: 'default', value: '#409eff', label: '默认蓝' },
  { name: 'green', value: '#67c23a', label: '清新绿' },
  { name: 'purple', value: '#8b5cf6', label: '优雅紫' },
  { name: 'orange', value: '#e6a23c', label: '活力橙' },
  { name: 'blue', value: '#3b82f6', label: '深邃蓝' }
]

// 默认设置
const defaultPreferences = {
  theme: 'light',
  themeColor: 'default',
  language: 'zh-CN',
  defaultView: 'grid',
  autoSave: true,
  showHiddenFiles: false,
  emailNotifications: true,
  browserNotifications: true,
  shareNotifications: true,
  storageWarnings: true
}

// 主题切换
const handleThemeChange = (theme: string) => {
  themeStore.setThemeMode(theme as 'light' | 'dark' | 'auto')
}

// 主题色切换
const handleThemeColorChange = (colorName: string) => {
  preferences.themeColor = colorName
  themeStore.setCustomTheme(colorName as any)
}

// 保存设置
const handleSave = async () => {
  saving.value = true
  
  try {
    // TODO: 调用保存偏好设置的API
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 保存到本地存储
    localStorage.setItem('userPreferences', JSON.stringify(preferences))
    
    ElMessage.success(t('dashboard.profile.preferences.messages.save_success'))
    
  } catch (error) {
    ElMessage.error(t('dashboard.profile.preferences.messages.save_fail'))
  } finally {
    saving.value = false
  }
}

// 恢复默认
const handleReset = async () => {
  try {
    await ElMessageBox.confirm(
      t('dashboard.profile.preferences.messages.reset_confirm_text'),
      t('dashboard.profile.preferences.messages.reset_confirm_title'),
      {
        confirmButtonText: t('dashboard.profile.avatarDialog.confirm'),
        cancelButtonText: t('dashboard.profile.avatarDialog.cancel'),
        type: 'warning'
      }
    )
    
    Object.assign(preferences, defaultPreferences)
    
    // 应用默认主题设置
    themeStore.setThemeMode('light')
    themeStore.setCustomTheme('default')
    
    ElMessage.success(t('dashboard.profile.preferences.messages.reset_success'))
    
  } catch {
    // 用户取消
  }
}

// 初始化设置
const initPreferences = () => {
  try {
    const saved = localStorage.getItem('userPreferences')
    if (saved) {
      const savedPreferences = JSON.parse(saved)
      Object.assign(preferences, savedPreferences)
      
      // 应用保存的设置
      themeStore.setThemeMode(preferences.theme as 'light' | 'dark' | 'auto')
      themeStore.setCustomTheme(preferences.themeColor as any)
    }
  } catch (error) {
    console.error('加载偏好设置失败:', error)
  }
}

// 页面初始化
onMounted(() => {
  initPreferences()
  
  // 同步当前主题状态
  preferences.theme = themeStore.themeMode
  preferences.themeColor = themeStore.customTheme
})
</script>

<style lang="scss" scoped>
.preference-settings {
  .form-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color-light);

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 8px 0;
      transition: color 0.3s ease;
    }

    p {
      font-size: 14px;
      color: var(--text-color-secondary);
      margin: 0;
      transition: color 0.3s ease;
    }
  }

  .preference-section {
    margin-bottom: 32px;
    padding: 24px;
    background-color: var(--bg-color-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color-light);
    transition: all 0.3s ease;

    h4 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin: 0 0 20px 0;
      transition: color 0.3s ease;
    }

    .preference-grid {
      display: grid;
      gap: 24px;

      .preference-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 20px 0;
        border-bottom: 1px solid var(--border-color-light);
        gap: 24px;

        &:last-child {
          border-bottom: none;
        }

        .preference-label {
          flex: 1;
          min-width: 0;

          span {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-color-primary);
            display: block;
            margin-bottom: 4px;
            transition: color 0.3s ease;
          }

          p {
            font-size: 12px;
            color: var(--text-color-secondary);
            margin: 0;
            line-height: 1.4;
            transition: color 0.3s ease;
          }
        }

        .preference-control {
          flex-shrink: 0;
          display: flex;
          align-items: center;
        }

        .theme-colors {
          display: flex;
          gap: 12px;
          flex-wrap: wrap;

          .color-option {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;

            &:hover {
              transform: scale(1.05);
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            }

            &.active {
              border-color: var(--text-color-primary);
              transform: scale(1.05);
              box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);

              &::after {
                content: '';
                position: absolute;
                top: -4px;
                right: -4px;
                width: 12px;
                height: 12px;
                background-color: var(--color-success);
                border-radius: 50%;
                border: 2px solid var(--bg-color-tertiary);
              }
            }
          }
        }
      }
    }
  }

  .preference-actions {
    text-align: right;
    padding-top: 24px;
    border-top: 1px solid var(--border-color-light);

    .el-button {
      margin-left: 12px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .preference-settings {
    .preference-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 16px 0;

      .preference-label {
        margin-bottom: 0;
      }

      .preference-control {
        width: 100%;

        .el-select {
          width: 100% !important;
        }

        .theme-colors {
          justify-content: flex-start;
        }

        .el-radio-group {
          width: 100%;

          .el-radio-button {
            flex: 1;
          }
        }
      }
    }

    .preference-actions {
      text-align: center;

      .el-button {
        margin: 0 6px;
        width: 120px;
      }
    }
  }
}
</style>
